<template>
	<view class="home_content">
		<!-- banner图 -->
		<swiper class="swiper" :indicator-dots="false" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item><image src="../../static/img/banner.png" mode=""></image></swiper-item>
		</swiper>
		<view class="footer">
			<!-- 应用图标 -->
			<view class="icons">
				<view class="i_title">应用</view>
				<view class="i_items">
					<view class="i_item">
						<image src="../../static/img/calendar.png" mode=""></image>
						<p>我的考勤</p>
					</view>
					<view class="i_item">
						<image src="../../static/img/card.png" mode=""></image>
						<p>一卡通</p>
					</view>
					<view class="i_item">
						<navigator url="../myPerformance/index">
							<image src="../../static/img/performance.png" mode=""></image>
							<p>我的绩效</p>
						</navigator>
					</view>
						<view class="i_item">
							<navigator url="../all/index">
								<image src="../../static/img/all.png" mode=""></image>
								<p>全部</p>
							</navigator>
						</view>
				</view>
			</view>
			<!-- 消息 -->
			<view class="information">
				<view class="i_title">消息</view>
				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
					<view class="notice">
						<p>
							· 同学，请及时填报2020年5月绩效目标
							<span style="margin-left: 40rpx;color: #C2C4C7;">1分钟前</span>
						</p>
						<p>
							· 同学，你的转正申请流程已审批完成
							<span style="margin-left: 40rpx;color: #C2C4C7;">1小时前</span>
						</p>
					</view>
					<image class="navigat" src="../../static/img/right.png" mode=""></image>
				</navigator>
			</view>
			<!-- 统计 -->
			<view class="statistics">
				<view class="s_top">
					<view class="i_title">统计</view>
					<image class="settings" src="../../static/img/settings.png" mode=""></image>
				</view>
				<view class="cards">
					<view class="card1">
						<view class="cart_text">累计加班</view>
						<view class="cart_text">3.5日</view>
					</view>
					<view class="card2" @click="queryInvalidActivity()">
						<view class="cart_text">年休假</view>
						<view class="cart_text">3.5日</view>
					</view>
				</view>
				<!-- 折线图 -->
				<view class="chart">
					<!-- #ifndef H5 -->
					<view class="line-chart" id="chart"></view>
					<!-- #endif  -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as echarts from '@/components/echarts/echarts.min.js'; /*chart.min.js为在线定制*/
let chart = null;
export default {
	data() {
		return {
			echarts,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
		};
	},
	onShow() {
		// this.queryInvalidActivity()
	},
	onLoad() {
		
	},
	methods: {
		queryInvalidActivity() {
			console.log(1)
			// #ifdef H5
			this.initChart({
				canvas: document.getElementById('chart'),
				width: 200,
				height: 900
			});
			// #endif
			console.dir(document.getElementById('chart'))
		},
		initChart({ canvas, width, height }) {
			console.log(width)
			console.dir(canvas)
			var data1 = [334, 390, 330, 320];
			var data2 = [ 134, 90, 230, 210];
			var data3 = [1334, 1390, 1330, 1320];
			var data4 = [ 1134, 190, 1230, 1210];
			var option = { 
				grid: {
					left: '3%',
		
					right: '4%',
		
					bottom: '3%',
		
					containLabel: true
				},
		
				xAxis: {
					type: 'value',
					max: 600,
					show: false
				},
		
				yAxis: {
					type: 'category',
		
					data: ['其他', '挽留', '提质', '拉新'],
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					}
				},
		
				series: [
					{
						name: '派单量',
		
						type: 'bar',
		
						stack: '总量',
		
						barWidth: 15, //柱子宽度
		
						label: {
							normal: {
								show: true,
		
								position: 'insideRight'
							}
						},
						itemStyle: {
							normal: {
								barBorderRadius: [10, 0, 0, 10],
								color:'#FFAE03'
							}
						},
						data: data1
					},
					{
						name: '计划量',
						type: 'bar',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'insideRight'
							}
						},
						itemStyle: {
							normal: {
								barBorderRadius: [0,10,10,0],
								color: '#DCDCDC'
							}
						},
						data: data2
					},
				]
			};
			chart = echarts.init(canvas);
			chart.setOption(option);
		},
	}
};
</script>

<style lang="less">
.i_title {
	// width: 100%;
	font-size: 36rpx;
	color: #101010;
	font-weight: 600;
}
.home_content {
	width: 100%;
	height: 100%;
	padding-bottom: 40rpx;
	box-sizing: border-box;
	// 轮播图
	.swiper {
		width: 100%;
		height: 400rpx;
		background-color: #eee;
		swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}
	.footer {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		// 应用图标
		.icons {
			width: 100%;
			.i_items {
				width: 100%;
				margin: 40rpx 0 0 0;
				display: flex;
				justify-content: space-around;
				text-align: center;
				.i_item {
					width: 15%;
					// height: 60rpx;
					image {
						width: 50rpx;
						height: 50rpx;
					}
					p {
						font-size: 24rpx;
						color: #101010;
						margin-top: 5rpx;
					}
				}
			}
		}
		// 消息
		.information {
			margin-top: 50rpx;
			width: 100%;
			position: relative;
			.notice {
				width: 100%;
				height: 120rpx;
				margin: 40rpx 0 0 0;
				background-color: #f3f9ff;
				padding: 15rpx 35rpx;
				box-sizing: border-box;
				p {
					font-size: 24rpx;
					color: #4f4f4f;
					line-height: 2;
				}
			}
			.navigat {
				position: absolute;
				top: 62%;
				right: 4%;
				width: 48rpx;
				height: 48rpx;
			}
		}
		// 统计
		.statistics {
			margin-top: 30rpx;
			width: 100%;
			.s_top {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				padding: 25rpx 0;
				box-sizing: border-box;
				.settings {
					width: 40rpx;
					height: 40rpx;
					margin-top: 10rpx;
				}
			}
			.cards {
				width: 100%;
				height: 110rpx;
				display: flex;
				.card1,
				.card2 {
					width: 48%;
					height: 100%;
					background-color: #72b6ff;
					border-radius: 6rpx;
					padding: 40rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					.cart_text {
						color: #fff;
						font-size: 25rpx;
					}
				}
				.card1 {
					margin-right: 30rpx;
				}
			}
			// 折线图
			.chart {
				width: 100%;
				height: 500rpx;
				border: 2rpx solid rgba(230, 230, 230, 1);
				margin-top: 30rpx;
				background-color: pink;
			}
		}
	}
}
</style>
